<template>
  <form>
      <!-- 输入手机号码 -->
      <input ref="phoneInput" id="phone_number" type="number" v-model="phoneNumber" placeholder="请输入手机号码">
      <span class="get_code" :style="cursorStyle" @click="getCode" >{{aging}}</span>
      <!-- 输入验证码 -->
      <div class="code">
        <input
         type="text"
         maxlength="1" 
         ref="codeInput"
         v-for="(value,index) in codeArr" 
         :key="index" 
         v-model="codeArr[index]" 
         :disabled="isDisable[index - 1]"
        >
      </div>
  </form>
</template>

<script>
import {ref, watch, onMounted} from 'vue'
export default {
    name: 'SimpleLoginPhone',
    setup() {
        let phoneregExp = /^\d{11}$/ //简单判断手机号码，可以更换其他的复杂判断
        let phoneInput = ref(null)
        let agingTime = ref(60) //60秒后重新发送
        let flag = ref(true) //避免60秒内重复点击发送
        let aging = ref('获取验证码')
        let cursorStyle = ref('cursor:pointer')
        let phoneNumber = ref('')
        let isDisable = ref([-1,-1,-1]) //是否禁用输入框
        let codeArr = ref(['','','','']) //输入的验证码数组
        let codeInput = ref(null)

        onMounted(() => {
            phoneInput.value.focus()
        })

        //侦听输入的验证码动态开启后一个输入框
        watch(codeArr.value, (v)=>{
            for(let i = 0; i < v.length; i++) {
                if(v[i] !== '') {
                    isDisable.value[i] = 0
                    codeInput.value[i].blur()
                    if(i < 3) {
                        setTimeout(() => {
                            codeInput.value[i+1].focus()
                        }, 10);
                    }
                }
            }
            // 输完验证码后立即发送Ajax
            if(v[v.length - 1] !== '') {
                //这里可以发送Ajax请求
            }
        })

        //请求手机验证码
        function getCode() {
            if(phoneNumber.value === '') return alert('手机号码不能为空！')
            if(!phoneregExp.test(phoneNumber.value)) return alert('请输入正确的手机号码！')
            //60秒后重新获取验证码
            if(flag.value) {
                flag.value = !flag.value
                cursorStyle.value = 'cursor:not-allowed'
                let time = setInterval(() => {
                    if(agingTime.value <= 0) {
                        aging.value = '获取验证码'
                        agingTime.value = 60
                        cursorStyle.value = 'cursor:pointer'
                        flag.value = !flag.value
                        clearTimeout(time)
                        return
                    }
                    agingTime.value--
                    aging.value = `${agingTime.value}秒后重新获取`
                }, 1000);
                //这里可以发送Ajax请求
            }
        }


        return {
            codeInput,
            phoneInput,
            aging,
            phoneNumber,
            cursorStyle,
            isDisable,
            codeArr,
            getCode
        }
    }
}
</script>

<style scoped lang="css">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
/* 输入手机号输入框 */
#phone_number {
    position: relative;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 10px;
    width: 60%;
    height: 30px;
    font-size: 1.5rem;
    border: 0px;
    border-bottom: 2px solid #000;
    outline: none;
}

/* 获取验证码按钮 */
.get_code {
    position: relative;
    top: 37px;
    left: 11px;
    color: rgb(138, 187, 252);
    cursor: pointer;
}
.get_code:hover {
    color: rgb(0, 108, 250);
    cursor: pointer;
}

/* 验证码输入框 */
.code {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.code input {
    margin: 0px 10px;
    width: 50px;
    height: 50px;
    font-size: 4rem;
    text-align: center;
}
</style>